GT-ONE 楽天タグ講座 パイプ奮闘記

test

日記 GT-ONE WEBSITE 【プチ講座】
 【プチ講座】  ヘルプ(ご質問掲示板)  チャット
HP

    今日は【初心者のための日記でTABLE講座!2】です!
    前回は テーブルを使いまして、背景色を入れて見ました。
    また、「TABLE」の中に「TABLE」も入れてみまして、便箋風な雛形も載せて見ましたね!
     
    今回は、背景画像を入れてみましょう!
    そして、「TABLE」の行と列を増やしてみます。
    それを、大きな外側の「TABLE」の中に入れてみます。

  ■ 日記に背景画像を入れてみよう!
    まず背景色は↓これでしたよね!


<table width="100%" border="1" cellspacing="1" cellpadding="0" bordercolor="deeppink" bgcolor="#ffeeee"><tr><td bgcolor="#ffeeee">ここがセル内です</td></tr></table>

    ↑これに  この背景画像を入れて見ます。セルの中にbackground="背景画像のURL"を追加します。
    追加して見ました。↓


<table width="100%" border="1" cellspacing="1" cellpadding="0" bordercolor="deeppink" bgcolor="#ffeeee"><tr><td bgcolor="#ffeeee" background="http://plaza.rakuten.co.jp/img/user/65/14/1286514/57.gif ">
ここがセル内です
</td></tr></table>

    日記に壁紙が貼れました。「ここがセル内です」というところにテキストを書きます。


このように、日記を書いて行きます。
テキストは「ENTER」で改行します。
インデントしたい時は <UL>ここにテキスト</UL> を追加します。

    <UL>
    このように、行の頭をインデントして
    そろえる事が出来ます。
     
    また、センターリングしたい時は、<CENTER>ここにテキスト</CENTER> と書きますと、
    テキストも画像も<CENTER>~から~</CENTER> ですべてがセンターリングします。
    </UL>

<CENTER>
このようになります。
すべてのテキスト、画像がセンターリングします。

お判りでしょうか!( ̄‥ ̄)=3 フン
</CENTER>

 
 
   ■ テーブルの行と列を増やしてみよう!
【1列×1行】
 
ここがセル内です
<table width="150" border="1" cellspacing="0" cellpadding="0"><tr><td>ここがセル内です</td></tr></table>

【2列×1行】
 
ここがセル内ですここがセル内です
セルを2列にしてみます。<td>ここがセル内です</td>を追加します。
<table width="150" border="1" cellspacing="0" cellpadding="0"><tr> <td>ここがセル内です</td><td>ここがセル内です</td></tr></table>

【1列×2行】
 
ここがセル内です
ここがセル内です
セルを2行にしてみます。<tr><td>ここがセル内です</td></tr>を追加します。
<table width="150" border="1" cellspacing="0" cellpadding="0"><tr><td>ここがセル内です</td></tr><tr><td>ここがセル内です</td></tr></table>

【2列×2行】
 
ここがセル内ですここがセル内です
ここがセル内ですここがセル内です
上の基本を元にして、2列×2行のテーブルを作ってみましょう。
<table width="150" border="1" cellspacing="0" cellpadding="0"><tr><td>ここがセル内です</td><td>ここがセル内です</td></tr><tr><td>ここがセル内です</td><td>ここがセル内です</td></tr></table>

    どうでしょう!お判りになるでしょうか!お願い・・わかって・・!( ̄_ ̄ i)タラー
    この2列×2行のTABLEを使いまして、ちょっとしたアルバム風にする事が出来ます。
    背景をつけた、TABLEの中に、この2列×2行のTABLEを入れます。
    では!やってみましょう。( ̄‥ ̄)=3 フン


 
ここに画像の説明を書きます。
ここに画像の説明を書きます。

 

    わかりやすいように、2列×2行のテーブルには枠を入れております。
    枠をなくすには、border="1" を border="0" にします。
    タグを書いて見ます。


 
<table width="100%" border="1" cellspacing="1" cellpadding="0" bordercolor="deeppink" bgcolor="#ffeeee"><tr><td bgcolor="#ffeeee" background="http://plaza.rakuten.co.jp/img/user/65/14/1286514/57.gif ">
 
<table width="80%" border="1" bordercolor="deeppink" cellspacing="0" cellpadding="5" align="center"><tr><td><CENTER><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/71.jpg"></CENTER></td><td>ここに画像の説明を書きます。</td></tr><tr><td><CENTER><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/72.jpg"></CENTER></td><td>ここに画像の説明を書きます。</td></tr></table>
 
</td></tr></table>
 

    Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved









( ̄m ̄*)V 皆さん気をつけてね!
ヾ(▽⌒*)キャハハハo(_ _)ノ彡_☆バンバン!!
 



--------------------------------------------------------------
 


お騒がせしております!


日記の【プチ講座】




修復中です





© Rakuten Group, Inc.